<template>
  <div class="time-line">
    <el-timeline v-if="data.length" class="logs">
      <!-- time-line的默认插槽，外部使用时直接按照el-time-line的默认插槽使用 -->
      <template #default>
        <slot v-if="slot.default" name="default"></slot>
        <el-timeline-item v-for="(item, index) in data" :key="index" type="primary" :hollow="true" v-bind="$attrs">
          <template v-if="!slot.item" #default>
            <div class="flex items-center color-#409eff mb-1">
              <div class="w-70px">{{ item.operatorName }}</div>
              <div class="w-150px">{{ item.operateTime }}</div>
              <div class="w-150px" v-if="showProgressColor">
                <el-progress :percentage="item.taskProgress" :color="progressColor ?? progressColors" />
              </div>
              <slot v-if="slot.attachment || item.attachments && item.attachments.length" name="attachment">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <el-link icon="Link" type="primary" :underline="false">交付物</el-link>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <file-list :file-lists="item.attachments"></file-list>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </slot>
            </div>
            <div class="color-#666">{{ item.content }}</div>
            <!-- time-line-item的默认插槽，外部使用时通过<template #item></template>来引用 -->
          </template>
          <slot v-if="slot.item" name="item"></slot>
          <template v-if="slot.dot" #dot>
            <!-- time-line-item的默认插槽，外部使用时按照正常使用dot插槽的方式 -->
            <slot name="dot"></slot>
          </template>
        </el-timeline-item>
      </template>
    </el-timeline>
    <el-empty v-else description="暂无日志记录" />
  </div>
</template>
<script setup lang="ts">
import { TimelineItem, TimeLineColors } from './types';
import { useSlots } from 'vue';
import { progressColors } from '@/plugins/progress';

const slot = useSlots();

// 其余时间线属性和插槽参照el-timeline文档
withDefaults(defineProps<{
  data: TimelineItem[],
  progressColor?: TimeLineColors[] | ((percentage: number) => string) | string, // 仅当 showProgressColor 为 true 时有效
  showProgressColor?: boolean
}>(), {
  showProgressColor: true
});
</script>
<style scoped lang="scss"></style>
